<template v-loading="loading">
  <!-- 顶部返回吸顶条 -->
  <base-header :showButton="true" :backTextShow="true">
    <template #title>{{ ticketName }}</template>
  </base-header>
  <zcb-approval-record :activities="activities" :nodeConfig="nodeConfig"></zcb-approval-record>
  <zcb-time-line :activities="activities"></zcb-time-line>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ERR_OK } from 'config/statusCode'
import { getUserInfo } from 'utils/headerToken'
import baseHeader from 'components/base-header'
import { getprocessRuntimeVariableApi } from 'api/personalCenter'
import { docConfigCodelineList } from 'api/personalCenter'

import { getApproveDetailApi } from 'api/personalCenter'

import { useI18n } from 'vue-i18n'
const { t } = useI18n() // 中英文
const router = useRouter()
const route = useRoute()
const nodeConfig = ref({})
const instanceId = ref(route.query.instanceId || '')
const ticketCode = ref(route.query.ticketCode || '')

// 流程记录列表
const loading = ref(false)
const activities = ref([])

const getApproveDetail = async () => {
  //  获取审批详情
  const { code, data } = await getApproveDetailApi({ ticketCode: ticketCode.value }, instanceId.value)
  if (code === ERR_OK) {
    activities.value = data.approvalRecordsList || [] // 流程记录列表
    nodeConfig.value = data.processVersionDetailDTO?.nodeOrder || {} // 流程图tree
  }
  loading.value = false
}
onMounted(() => {
  getApproveDetail()
})
</script>
<style lang="scss" scoped>
.mt20 {
  margin-top: 20px;
}
.cont {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-top: -15px;
  .cont_left {
    width: 80%;
    height: calc((100vh - 229px));
    margin-bottom: -16px;
    overflow: auto;
    overflow-y: scroll;
    padding: 16px 0 16px 16px;
    &::-webkit-scrollbar {
      height: 5px;
      width: 5px;
    }
    &::-webkit-scrollbar-corner {
      background: #204754;
    }
    &::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 10px;
    }
    &::-webkit-scrollbar-track {
      background: #fff;
      border-radius: 2px;
    }
  }
  .cont_right {
    width: 392px;
    position: relative;
    .cont_right_s {
      height: calc((100vh - 208px));
      margin-bottom: -16px;
      margin-right: -16px;
      overflow: auto;
      overflow-x: hidden;
      overflow-y: scroll;
      padding: 16px 0 16px 0px;
      border-right: 1px var(--el-border-color) var(--el-border-style);
      position: relative;
      &::-webkit-scrollbar {
        height: 5px;
        width: 5px;
      }
      &::-webkit-scrollbar-corner {
        background: #204754;
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::-webkit-scrollbar-track {
        background: #fff;
        border-radius: 2px;
      }
      .approval_record {
        padding: 2px;
        padding: 16px 16px 0 16px;
        .timeline_card {
          width: 308px;
          padding: 12px;
          background: #fafafa;
          margin-bottom: 8px;
        }
        .timeline_title {
          .timeline_title_l {
            font-weight: 400;
            color: #333333;
            line-height: 18px;
            font-size: 12px;
            margin-bottom: 8px;
            margin-top: 4px;
            span {
              color: #999999;
              margin-left: 8px;
            }
          }
          .timeline_title_lb {
            margin-bottom: 0;
          }
          .timeline_title_c {
            color: #666666;
            font-size: 12px;
            margin-bottom: 8px;
          }
          .timeline_title_cSuccess {
            color: #48d000;
          }
          .timeline_title_cError {
            color: red;
          }
          .timeline_title_r {
            width: 100%;
            color: #666666;
            line-height: 18px;
            font-size: 12px;
            word-wrap: break-word;
            display: flex;
            flex-direction: row;
            .timeline_title_r_ctitle {
              font-size: 12px;
              width: 20%;
            }
            .timeline_title_r_comm {
              word-wrap: break-word;
              width: 80%;
            }
          }
        }
      }
    }
  }
}
.line {
  width: 100%;
  padding-right: 16px;
  border-bottom: 1px var(--el-border-color) var(--el-border-style);
  position: absolute;
  left: -16px;
  top: 93px;
  z-index: 1;
}
</style>
